<template>
  <div class="viewHomework">
    <h3>班级列表：</h3>
    <div class="class">
      <template v-for="(item, idx) in classList">
        <span :key="idx">
          <el-button
            type="primary"
            size="medium"
            style="marginRight:10px"
            @click="chooseClass(item)"
            >{{ item.name }}</el-button
          >
        </span>
      </template>
    </div>
    <div class="content">
      <div class="classMember">
        <h3>学生列表：</h3>
        <div v-if="classMember.length === 0">
          <h3>空</h3>
        </div>
        <div v-else>
          <template v-for="(item, idx) in classMember">
            <div :key="idx">
              <el-button
                size="medium"
                style="marginBottom:10px"
                @click="chooseStudent(item)"
                >{{ item.name }}</el-button
              >
            </div>
          </template>
        </div>
      </div>
      <div class="code">
        <CodeContainer :hasButton="false" :res="res"></CodeContainer>
        <div class="score">
          <span>代码得分(0~10)：</span>
          <el-input
            v-model="codeScore"
            placeholder="请输入分数"
            style="width:200px;marginLeft:20px;"
          ></el-input>
        </div>
        <div class="score">
          <span>结果得分(0~10)：</span>
          <el-input
            v-model="resScore"
            placeholder="请输入分数"
            style="width:200px;marginLeft:20px;marginTop:20px"
          ></el-input>
        </div>
        <div class="submit">
          <el-button type="primary" round @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CodeContainer from '../homeworkManage/codeContainer.vue'
export default {
  name: '',
  components: {
    CodeContainer,
  },
  mounted() {
    this.axios.defaults.headers.common[
      'Authorization'
    ] = window.sessionStorage.getItem('token')
    ;(async () => {
      // 获取班级列表
      await this.axios.post('/user/query_group/').then(res => {
        this.classList = res
        console.log(this.classList)
      })
      //获取班级人员
      await this.axios
        .post('/user/query_group_member/', {
          name: this.classList[0].name,
        })
        .then(res => {
          this.classMember = res
        })
    })()
  },
  data() {
    return {
      classList: [],
      classMember: [],
      res: '默认结果',
      codeScore: null,
      resScore: null,
      submitHomeworkKey: null,
    }
  },
  methods: {
    chooseClass(data) {
      this.axios
        .post('/user/query_group_member/', {
          name: data.name,
        })
        .then(res => {
          this.classMember = res
        })
    },
    chooseStudent(data) {
      this.axios
        .post('/assess/query_work_teacher/', {
          key: data.key,
          work_key: this.$route.query.key,
        })
        .then(res => {
          this.submitHomeworkKey = res.key
          this.$store.dispatch('saveJudgeHomeworkCode', { code: res.code })
        })
    },
    submit() {
      const codeScore = parseInt(this.codeScore)
      const resScore = parseInt(this.resScore)
      if (
        codeScore < 0 ||
        codeScore > 10 ||
        resScore < 0 ||
        resScore > 10 ||
        isNaN(codeScore) ||
        isNaN(resScore)
      ) {
        this.$message.error('分数不合法')
        return
      }
      console.log(((codeScore + resScore) / 2).toFixed(2))
      this.axios
        .post('/assess/work_point/', {
          key: this.submitHomeworkKey, //提交作业id
          point: ((codeScore + resScore) / 2).toFixed(2),
        })
        .then(res => {
          console.log(res)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.viewHomework {
  padding: 20px;
  .class {
    max-width: 1000px;
    margin-bottom: 30px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    span {
      display: inline-block;
    }
  }
  .content {
    display: flex;
    .classMember {
      width: 200px;
      height: 600px;
      overflow-y: scroll;
    }
    .code {
      flex: 1;
      .submit {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
